<template>
    <div class="feedback-body">
        <div
            class="header-right"
            display="flex">
            <div>
                <div class="block">
                    <span class="demonstration">学校:</span>
                    <el-cascader
                        ref="myCascader"
                        v-model="searchValue"
                        :options="feedbacklist"
                        @change="chickvalue(1)"
                        size="small"
                        clearable
                        :props="{
                            value: 'id',
                            label: 'name',
                            children: 'children'
                        }"
                    />
                </div>
            </div>
            <div class="block">
                <span class="demonstration">选择日期:</span>
                <el-date-picker
                    v-model="value1"
                    type="date"
                    size="small"
                    @change="changedata(1)"
                    placeholder="选择日期"/>
            </div>
            <div class="block">
                <span class="demonstration">反馈类型:</span>
                <el-select
                    v-model="value"
                    placeholder="全部"
                    clearable
                    size="small"
                    @change="changeOptions(1)">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                </el-select>
            </div>
            <div class="school">
                <el-col
                    class="filter-item"
                >
                    <span class="demonstration">学校/题目:</span>
                    <el-input
                        v-model="schoolName"
                        placeholder="请输入关键字"
                        clearable
                        size="small"
                        @keyup.native.enter="select_school(1)" />
                    <el-button
                        style="marginLeft: 20px"
                        size="small"
                        type="primary"
                        @click="select_school(1)">搜索</el-button>
                    <el-button
                        class="feedback-management"
                        type="primary"
                        size="small"
                        @click="feedbacakRouteTocount()"
                    >反馈数据</el-button>
                </el-col>
            </div>
        </div>
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            :row-style="rowStyle"
            border
        >
            <el-table-column
                label="序号"
                type="index"
                width="60"
                align="center"
            />
            <el-table-column
                prop="school_name"
                label="学校"
                align="center"
            />
            <el-table-column
                prop="question_title"
                label="题目"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                prop="question_option_json"
                label="选项"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <div
                        v-for="(item,index) in JSON.parse(scope.row.question_option_json)"
                        :key="index">
                        {{ (index + 1 + '.' ) + item }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="反馈类型"
                prop="type"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <div v-if="scope.row.type == 0">
                        其他
                    </div>
                    <div v-else-if="scope.row.type == 1">
                        题目有误
                    </div>
                    <div v-else-if="scope.row.type == 2">
                        有错别字
                    </div>
                    <div v-else-if="scope.row.type == 3">
                        答案有误
                    </div>
                    <div v-else-if="scope.row.type == 99">
                        全部
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="反馈描述"
                prop="reason"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                label="反馈用户"
                prop="report_username"
                show-overflow-tooltip
                :width="160"
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <!-- <div v-if="scope.row.student_true_name">
                        {{ scope.row.student_true_name }} - {{ scope.row.student_phone }}
                    </div>
                    <div v-else>
                        {{ scope.row.student_phone }}
                    </div> -->
                    <span>
                        {{ scope.row.student_true_name !== '' ? scope.row.student_true_name : ' ' }}
                        {{ scope.row.student_no !== undefined ? scope.row.student_no : '' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                label="反馈时间"
                prop="report_time"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.report_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="反馈回复"
                prop="reply"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                label="操作"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <el-button
                        @click="reply(scope.row)"
                        type="text"
                    >
                        回复
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 反馈回复弹窗 -->
        <el-dialog
            title="反馈信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <textarea
                class="dialog-Text"
                name="信息"
                id=""
                cols="30"
                rows="10"
                v-model= "retext"
                placeholder="请认真填写，该回复将发送给用户"/>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submit () ">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if="tableData.length >= 0"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableDataselect"
            />
        </div>
        <!-- /分页 -->
    </div>
</template>
<script>
export default {
    data () {
        return {
            newscholname:'',
            School_name:'',
            reReport_id:null,
            retext:'',
            idList:[],
            dialogVisible:false,
            college:'',
            input: '',
            schoolName:'',
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            // 反馈类型
            type: '',
            value: '全部',
            // 反馈类型
            // 获取选择的日期
            value1: '',
            value2: '',
            // 获取选择的日期
            showDataInfo: true,
            key_word:'',
            dataList:[],
            cityCollege:'',
            feedbacklist:[],
            feedbackData:[],
            searchValue:'',
            school_name :'',
            options: [{
                value: '99  ',
                label: '全部'
            }, {
                value: '1',
                label: '题目有误'
            }, {
                value: '2',
                label: '有错别字'
            }, {
                value: '3',
                label: '答案有误'
            }, {
                value: '0',
                label: '其它'
            }],
            tableData:[],
            retuendata:null,
        };
    },
    created(){
        this.setHeader();
        this.getTableData();
        this.fnGetCity();
    },
    mounted(){
    },
    methods: {
        // 选择二级联动筛选
        chickvalue (page) {
            this.key_word = '';
            this.sschoolName = '';
            this.feedbacklist.map((item) => {
                item.children.map((item) => {
                    if (this.searchValue[1] == item.id){
                        this.sschoolName = item.name;
                    }
                });
            });
            if(this.sschoolName == '全部') {
                this.sschoolName = '';
            }
            if(this.searchValue[1] == 'city'){
                this.cityId = this.searchValue[0];
                this.$post('/student/forum_exam_report%5Cget_list', {
                    page_id: page || this.page.now_page,
                    city_id: this.cityId,
                }, resp => {
                    if (resp.code == 1) {
                        this.tableData = resp.data.list;
                        this.tableData.sort(this.sortIndex);
                        this.page.now_page = resp.data.page.now_page;
                        this.page.total_count = resp.data.page.total_count;
                        this.page.page_size = resp.data.page.page_size;
                    }
                });
            } else if(this.searchValue[1] != 'city') {
                this.newscholname = '';
                this.feedbacklist.map((item)=>{
                    item.children.map((item)=>{
                        if(item.id == this.searchValue[1]){
                            this.newscholname = item.name;
                        }
                    });
                });
                this.$post('/student/forum_exam_report%5Cget_list', {
                    page_id: page || this.page.now_page,
                    key_word: this.newscholname

                }, resp => {
                    if (resp.code == 1) {
                        this.tableData = resp.data.list;
                        this.tableData.sort(this.sortIndex);
                        this.page.now_page = resp.data.page.now_page;
                        this.page.total_count = resp.data.page.total_count;
                        this.page.page_size = resp.data.page.page_size;
                    }
                });
            }
        },
        // 选择学校名 筛选
        select_school(page) {
            this.$post('/student/forum_exam_report%5Cget_list', {
                page_id: page || this.page.now_page,
                key_word:this.schoolName,
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },
        // 选择类型筛选
        changeOptions(page){
            this.$post('/student/forum_exam_report%5Cget_list', {
                page_id: page || this.page.now_page,
                type: this.value !== '' ? this.value : '99',
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });

        },
        rowStyle () {
            return 'height: 100px';
        },
        // 日期时间筛选接口
        changedata(page) {
            this.retuendata = new Date(this.value1).getTime() / 1000;
            this.$post('/student/forum_exam_report%5Cget_list', {
                page_id: page || this.page.now_page,
                create_time: this.retuendata !== '' ? this.retuendata : '',
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
            console.log(this.retuendata);

        },
        /**
         * 获取二级联动数据
         */
        fnGetCity () {
            this.$post('/student/region_college%5Ccity_college_linkage', {}, resp => {
                if (resp.code == 1) {
                    this.feedbacklist = resp.data;
                    this.feedbacklist.map((item)=>{
                        item.children.unshift({
                            children:[],
                            id:'city',
                            name:'全部'
                        });
                        item.children.map((item)=>{
                            this.idList.push(item);
                            delete item.children;
                        });
                    });
                }
            });
        },
        // 跳转到反馈统计页面
        feedbacakRouteTocount(id) {
            this.$router.push('data-feedback');
        },
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '社交'
            },
            {
                title: '试题结果'
            },
            {
                title: "反馈管理"
            }]
            );
        },
        // 回复成功的交互
        submit () {
            this.dialogVisible = false;
            this.$post('/student/forum_exam_report%5Cset_replay', {
                report_id:this.reReport_id,
                reply:this.retext,
            }, resp => {
                if(resp.code == 1 ){
                    this.$notify({
                        title: '成功',
                        message: '反馈回复成功',
                        type: 'success'
                    });
                } else if (resp.code == 0){
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
            this.getTableData(1);
        },
        /**
         * 获取表格数据
         */
        getTableData (page) {
            let parameter = [];

            parameter = this.$route.query;
            this.$post('/student/forum_exam_report%5Cget_list', {
                page_id: page || this.page.now_page,
                question_no:'',
                create_time: this.retuendata !== '' ? this.retuendata : '',
                type: parameter == [] ? this.type !== '' ? this.type : '' : parameter.type,
                key_word: parameter == []? this.schoolName !== '' ? this.schoolName : '' : parameter.key_word,
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });

        },
        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        // 点击回复反馈
        reply (row) {
            this.retext = '';
            this.dialogVisible = true;
            this.reReport_id = row.report_id;
        },
        // 点击关闭回复按钮
        handleClose () {
            this.dialogVisible = false;
        },
        getTableDataselect(){
            if(this.searchValue[1]){
                this.chickvalue();
            } else{
                this.getTableData();
            }
        }
    }
};
</script>

<style lang="less" scoped>
    .feedback-body{
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        .feedback-management{
            float: right;
            margin-bottom: 20px;
        }
        .header-right{
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            .header-title{
                line-height: 32px;
                display: inline-block;
            }
            .block{
                margin-left: 15px;
                display: flex;
                height: 32px;
                align-items: center;
                .demonstration {
                    white-space: nowrap;
                }
            }
            .feedback-type{
                margin-left: 15px;
            }
            .filter-item{
                display: flex;
            }
            .school{
                display: flex;
                margin-left: 15px;
                .demonstration{
                    line-height: 32px;
                    white-space: nowrap;
                }
                .el-button{
                    height: 40px;
                }
            }
            .school .el-button[data-v-a59c33e6]{
                height: 32px;
            }
        }
    }
    .container {
        padding: 15px;
        flex: 1;
        flex-direction: column;
        position: relative;
        width: 100%;
        .operation-wrapper {
            display: flex;
            flex-direction: row-reverse;
            padding: 12px 23px;
            background-color: #fff;
        }
        .header {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-title {
                color: #262626;
                margin-left: 20px;
                margin-right: 5px;
            }
            .search-ipt {
                width: 260px;
            }
        }
    }
    .checkInfo{
        color: #409EFF;
        cursor: pointer;
    }
    .el-table{
        text-align: center;
    }
    #topic{
        width: 100px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .fontcolor{
        color: #409EFF
    }
    .data-num{
        display: inline-block;
    }
    .dialog-Text{
        width: 100%;
        height: 100px;
        border-radius: 5px;
        outline: none;
        padding: 3px;
    }
    .pagination-wrapper {
        padding-top: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
</style>
<style lang="less">
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
</style>